<!--
 * @Author: zlw
 * @Date: 2023-08-22 14:56:56
 * @LastEditTime: 2023-08-22 16:23:25
 * @Description: 视频宣传
 * @version: 1.0
-->
<template>
  <div class="VideoPromotion">
    <div
      class="videolist"
      v-for="(item, index) in datas.setStyle.imageList"
      :key="index"
      @click="goOhter(item)">
      <div class="video-container">
        <video controls :src="item.videoUrl" :poster="item.vimgUrl"></video>
        <div class="jiaobiao" v-show="item.isVipShow === 1">
          <img v-show="item.vipObj.isVipShow" src="../../assets/images/jbvip.png" alt="">
        </div>
        <img class="jiaobiao1" v-show="item.vipObj.isProductShow" src="../../assets/images/jbbuy.png" alt="">
        <img class="jiaobiao1" v-show="item.vipObj.isExperienceShow" src="../../assets/images/jbtiyan.png" alt="">
      </div>
      <div class="videotext">
        <div class="vptitle">
          <p>{{ item.title }}</p>
          <span>{{ item.desc }}</span>
        </div>
        <div class="vpbottom">
          <div class="vpbottomleft">
            <p>￥{{ item.price || '0.00'}}</p>
            <span>{{ item.flag }}</span>
          </div>
          <div class="vpbottomright">
            <img src="../../assets/images/lijitiyan.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { setProdSuitesByGoods } from '@/utils/common.js';
import { getVipStyle } from '../../common/comfun';
export default {
  name: 'VideoPromotion',
  props: {
    datas: Object
  },
  data () {
    return {
      resourceList: [],
      priceStr: '',
      vips: []
    };
  },
  created () {
    this.getVip();
  },
  mounted () {
    this.datas.setStyle.imageList.map((item) => {
      if (item.suitesId) {
        setProdSuitesByGoods(item.type, '', item.suitesId, '').then(data => {
          this.resourceList = JSON.parse(JSON.stringify(data));
          this.resourceList.map((ite) => {
            this.priceStr = ite.priceModes[0].price;
          });
          this.$set(item, 'price', this.priceStr);
        });
      }
    });
  },
  methods: {
    getVip () {
      if (localStorage.getItem('vipsArr') !== null) {
        const newVipsArr = JSON.parse(localStorage.getItem('vipsArr'));
        this.datas.setStyle.imageList.forEach(item => {
          newVipsArr && newVipsArr.forEach(ite => {
            if (item.id === ite.id) {
              this.vips = ite.vips;
            }
          });
          this.$set(item, 'vipObj', getVipStyle(this.vips, item.id));
        });
      }
    },
    goOhter (e) {
      const linkurl = `${window.location.origin}/mobparty/vipOrder?type=${e.type}&suiteId=` + e.suitesId;
      window.location.href = linkurl;
    }
  }
};
</script>
<style lang="scss" scoped>
.VideoPromotion {
  padding: 0 16px;
  .videolist{
    width: 343px;
    height: 336px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: calc(100% - 44px);
    padding: 15px 0;
    position: relative;
  }
  video {
    // max-width: 100%;
    width: 311px;
    height: 175px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
  }
  .jiaobiao{
    width: 24px;
    height: 18px;
    position: absolute;
    top: 0px;
    right: 16px;
    border-top-right-radius: 8px;
    img{
      width: 100%;
    }
  }
  .jiaobiao1{
    width: 30px;
    height: 18px;
    position: absolute;
    top: 15px;
    right: 16px;
    border-top-right-radius: 8px;
  }
  .videotext {
    padding: 5px 15px;
    .vptitle {
      margin-bottom:15px;
      p {
        font-size: 18px;
        font-family: PingFang SC-Medium, PingFang SC, sans-serif;
        font-weight: 500;
        color: #333333;
        line-height: 35px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 设置最大显示行数 */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }
      span {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 设置最大显示行数 */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
      }
    }
    .vpbottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .vpbottomleft {
        display: flex;
        align-items: center;
        p {
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC, sans-serif;
          font-weight: 500;
          color: #000000;
          line-height: 16px;
          margin-right: 5px;
        }
        span {
          width: 64px;
          height: 21px;
          background: linear-gradient(180deg, #ff6c6c 0%, #ff4f4f 100%);
          border-radius: 0px 8px 0px 8px;
          color: #ffffff;
          text-align: center;
          display: block;
          font-size: 12px;
          line-height: 21px;
        }
      }
      .vpbottomright{
        width: 80px;
        height: 28px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
